<template>
  <radio-group v-bind="$attrs" class="tz-radio-group" @change="onChange">
    <template v-for="(item, index) in options" :key="index">
      <radio
        :value="item.value"
        :checked="item.value === modelValue"
        :disabled="disabled"
        color="#1c78ef"
        class="tz-radio"
      >
        {{ item.text }}
      </radio>
    </template>
  </radio-group>
</template>
<script>
export default {
  name: "TzRadioGroup",
  inheritAttrs: false,
  props: {
    modelValue: {
      type: [String, Number, null],
      required: true,
      default: "",
    },
    options: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    const onChange = (e) => {
      emit("update:modelValue", e.detail.value);
      emit("change", e);
    };
    return { onChange };
  },
};
</script>

<style lang="scss">
.tz-radio-group {
  display: flex;
  align-items: center;
  .tz-radio,
  .weui-cells_checkbox {
    margin-left: 10px;
    &:first-child {
      margin-left: 0px;
    }
  }
  taro-radio-core {
    display: flex;
    align-items: center;
  }
}
</style>
